<template>
  <div class="article-container">
    <!-- 导航栏 -->
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>

    <!-- //文章详情 -->
    <div class="detail">
      <h3 class="title">{{ article.title }}</h3>
      <div class="author">
        <van-image
          width="1rem"
          height="1rem"
          round
          fit="fill"
          :src="article.aut_photo"
        />
        <div class="text">
          <p class="name">{{ article.aut_name }}</p>
          <p class="time">{{ article.pubdate | myShowTime }}</p>
        </div>
        <van-button round type="info" size="small" @click="followdeClick">
          {{ article.is_followed ? "取消关注" : "+关注" }}
        </van-button>
      </div>
      <div class="content">
        <div v-html="article.content"></div>
      </div>
      <br />
      <br />
      <div class="zan">
        <van-button
          round
          size="small"
          hairline
          type="primary"
          plain
          :icon="article.attitude == 1 ? 'good-job' : 'good-job-o'"
          @click="onPraise"
        >
          {{ this.article.attitude == 1 ? "取消点赞" : "点赞" }}
        </van-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-button
          round
          size="small"
          hairline
          type="danger"
          plain
          :icon="article.attitude == 0 ? 'delete' : 'delete-o'"
          @click="onLike"
          >{{
            this.article.attitude == 0 ? "取消不喜欢" : "不喜欢"
          }}</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getArticle,
  followdeUser,
  unfollowdeUser,
  articleParise,
  unarticleParise,
  getDislike,
  getLike,
} from "./home.js";
export default {
  name: "myarticle",
  data() {
    return {
      article: [],
    };
  },
  methods: {
    async followdeClick() {
      if (this.article.is_followed) {
        let res = await unfollowdeUser(this.article.aut_id);
        // console.log(res);
        this.article.is_followed = false;
      } else {
        let res = await followdeUser({ target: this.article.aut_id });
        // console.log(res);
        this.article.is_followed = true;
      }
    },
    //是否点赞
    async onPraise() {
      //   console.log(1);
      if (this.article.attitude == 1) {
        let res = await unarticleParise(this.article.art_id);
        console.log(res);
        this.article.attitude = -1;
      } else {
        let res = await articleParise({ target: this.article.art_id });
        console.log(res);
        this.article.attitude = 1;
      }
    },
    //是否喜欢
    async onLike() {
      if (this.article.attitude == 0) {
        let res = await getLike(this.article.art_id);
        console.log(res);
        this.article.attitude = -1;
      } else {
        let res = await getDislike({ target: this.article.art_id });
        console.log(res);
        this.article.attitude = 0;
      }
    },
  },
  async created() {
    let res = await getArticle({ id: this.$route.query.id });
    console.log(res);
    this.article = res.data.data;
  },
};
</script>

<style lang="less">
.article-container {
  .van-nav-bar {
    .van-nav-bar__content {
      //   height: 100px;
      background-color: #ffffff;
      .van-nav-bar__left {
        i::before {
          color: #598cf9;
        }
      }
      .van-nav-bar__title {
        color: #323233;
        font-size: 14px;
      }
    }
  }

  .detail {
    padding: 50px 10px;
    .title {
      font-size: 16px;
    }

    .author {
      padding: 10px 0;
      display: flex;
      //   line-height: 1rem;
      .text {
        flex: 1;
        padding-left: 10px;
        .name {
          font-size: 14px;
          margin: 0;
        }
        .time {
          font-size: 12px;
          color: #999;
          margin: 0;
        }
      }
    }
    .content {
      font-size: 14px;
      overflow: hidden;
      white-space: pre-wrap;
      word-break: break-all;
      img {
        max-width: 100%;
        background: #f9f9f9;
      }
    }
  }
}
</style>